<template>
    <div id="inoculate">
        <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>接种管理</el-breadcrumb-item>
            <el-breadcrumb-item>接种记录</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 接种记录卡片区 -->
        <el-card class="box-card">
            <el-form :inline="true" :model="queryMap" :rules="addFormRules" ref="addFormRef">
                <!-- 输入框 -->
                <el-input clearable @clear="searchByName"
                            style="width: 250px;margin-left: 10px;margin-right:10px"
                            type="text"
                            v-model="queryMap.realName"
                            @keydown.enter.native="searchByName"
                            placeholder="输入预约人名称模糊搜索..."
                            prefix-icon="el-icon-search"></el-input>
                <el-form-item label="预约时间" label-width="80px">
                    <el-date-picker
                    v-model="queryMap.reservationDate"
                    align="right"
                    type="date"
                    @change="search"
                    placeholder="选择日期"
                    style="width:160px;">
                    </el-date-picker>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" size="small"  @click="searchAll">搜索全部</el-button>
                <!-- 搜索条件 -->
            </el-form>

            <!-- 表格区域 -->
            <template>
                <el-table
                        border
                        size="mini"
                        v-loading="loading"
                        stripe
                        :header-cell-style="{textAlign: 'center'}"
                        :cell-style="{ textAlign: 'center' }"
                        :data="inoculatenData"
                        style="width: 100%;"
                        height="470"
                >
                    <el-table-column type="index" fixed="left" label="序号" width="50"></el-table-column>
                    <el-table-column prop="realName" fixed="left" label="预约人名称" width="90"></el-table-column>
                    <el-table-column prop="sex" fixed="left" label="性别" width="60">
                        <template slot-scope="scope">
                            <el-tag size="small" type="primary" v-if="scope.row.sex===1">男</el-tag>
                            <el-tag size="small"  type="warning" v-else>女</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="allergy" label="过敏史" width="60">
                        <template slot-scope="scope">
                            <el-tag size="small" effect="dark" type="danger" v-if="scope.row.allergy === true">有</el-tag>
                            <el-tag size="small" effect="dark" type="primary" v-else>无</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="health" label="身体健康" width="75">
                        <template slot-scope="scope">
                            <el-tag size="small" type="primary" v-if="scope.row.health === true">健康</el-tag>
                            <el-tag size="small"  effect="dark"  type="danger" v-else>亚健康</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="reservationDate" label="预约日期" width="110" sortable></el-table-column>
                    <el-table-column prop="health" label="预约时间" width="75">
                        <template slot-scope="scope">
                            <el-tag size="small" type="success" v-if="scope.row.reservationTime===1">上午</el-tag>
                            <el-tag size="small" type="success" v-else>下午</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="health" label="预约状态" width="100">
                        <template slot-scope="scope">
                            <el-tag size="small" effect="dark" type="danger" v-if="scope.row.states===0">预约未受理</el-tag>
                            <el-tag size="small" type="primary" v-if="scope.row.states===1">已受理</el-tag>
                            <el-tag size="small" type="info" v-else-if="scope.row.states===2">接种待留观</el-tag>
                            <el-tag size="small" type="success" v-else-if="scope.row.states===3">接种完成</el-tag>
                            <el-tag size="small" effect="dark" type="danger" v-else-if="scope.row.states=== -1">预约过期</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="vaccineName" label="预约疫苗名称" width="150"></el-table-column>
                    <el-table-column prop="vaccDegree" label="疫苗等级" width="70">
                        <template slot-scope="scope">
                            <el-tag size="small" effect="plain" v-if="scope.row.vaccDegree == 1" type="success">甲类</el-tag>
                            <el-tag size="small" effect="plain" v-else-if="scope.row.vaccDegree == 2" type="success">乙类</el-tag>
                            <el-tag size="small" effect="plain" v-else-if="scope.row.vaccDegree == 3" type="success">丙类</el-tag>
                            <el-tag size="small" effect="plain" v-else-if="scope.row.vaccDegree == 4" type="success">丁类</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="supplierName" label="疫苗提供商" width="150"></el-table-column>
                    <el-table-column prop="vaccineType" label="疫苗类别" width="120">
                        <template slot-scope="scope">
                            <div  v-for="vacctype in vaccineTypes" :key="vacctype.id" >
                                <el-tag size="small" v-if="scope.row.vaccineType == vacctype.id">{{vacctype.type}}</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="totalNeedle" label="疫苗注射总针数" width="110"></el-table-column>
                    <el-table-column prop="vaccineNeedle" label="预约第几针" width="105" sortable>
                        <template slot-scope="scope">
                            <el-tag size="small" effect="dark" type="success">{{scope.row.vaccineNeedle}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="vaccSiteName" label="预约接种点名称" width="160"></el-table-column>
                    <el-table-column label="预约的接种点信息">
                        <el-table-column
                                prop="area"
                                label="省份"
                                width="100">
                            <template slot-scope="scope">
                                <span v-text="scope.row.vaccSiteArea.split('-')[0]"></span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="area"
                                label="市"
                                width="100">
                            <template slot-scope="scope">
                                <span v-text="scope.row.vaccSiteArea.split('-')[1]"></span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="area"
                                label="区县"
                                width="100">
                            <template slot-scope="scope">
                                <span v-text="scope.row.vaccSiteArea.split('-')[2]"></span>
                            </template>
                        </el-table-column>
                        <el-table-column 
                            prop="vaccSiteAddress" 
                            label="接种点详细地址" 
                            width="180">
                        </el-table-column>
                        <el-table-column prop="vaccSitePhone" label="接种点电话" width="110"></el-table-column>
                    </el-table-column>
                    <el-table-column label="预约人其他基本信息">
                        <el-table-column
                                prop="area"
                                label="省份"
                                width="100">
                            <template slot-scope="scope">
                                <span v-text="scope.row.vaccinatorArea.split('-')[0]"></span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="area"
                                label="市"
                                width="100">
                            <template slot-scope="scope">
                                <span v-text="scope.row.vaccinatorArea.split('-')[1]"></span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="area"
                                label="区县"
                                width="100">
                            <template slot-scope="scope">
                                <span v-text="scope.row.vaccinatorArea.split('-')[2]"></span>
                            </template>
                        </el-table-column>
                        <el-table-column 
                            prop="vaccinatorAddress" 
                            label="详细住址" 
                            width="180">
                        </el-table-column>
                        <el-table-column prop="vaccinatorPhone" label="预约人电话" width="110"></el-table-column>
                    </el-table-column>
                    <el-table-column prop="remark" label="预约人备注信息" width="150"></el-table-column>
                    <el-table-column label="操作" fixed="right" width="180">
                        <template slot-scope="scope">
                            <el-button
                                    type="text"
                                    size="mini"
                                    icon="el-icon-view"
                                    @click="showRecord(scope.row.id)"
                            >查看</el-button>
                            <el-button
                                    v-hasPermission="'inoculate:edit'"
                                    type="text"
                                    v-if="scope.row.states === 1"
                                    size="mini"
                                    icon="el-icon-ice-cream-square"
                                    @click="acceptIncoulate(scope.row.id)"
                            >接种</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <!-- 分页 -->
            <el-pagination
                    style="margin-top:10px;"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="this.queryMap.pageNum"
                    :page-sizes="[ 10, 15, 20, 30]"
                    :page-size="this.queryMap.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
            
            <!-- 添加接种单对话框 -->
            <el-dialog :title="addTitle" :visible.sync="addDialogVisible" width="70%"  @close="closeAddDialog">
                <span>
                    <el-form
                            :model="editFrom"
                            :rules="addFormRules"
                            ref="addFormRef"
                            label-width="80px"
                            class="demo-ruleForm"
                    >
                        <div class="addStyle">
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="接种人名称" label-width="95px">
                                        <el-input v-model="editFrom.realName" disabled style="width:230px;"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="接种人住址" label-width="105px" >
                                        <el-input v-model="editFrom.vaccinatorAddress" disabled style="width:250px;"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="接种人电话" label-width="120px" >
                                        <el-input v-model="editFrom.vaccinatorPhone" disabled style="width:200px;"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!-- 第二行 -->
                            <el-row>
                                <el-col :span="2" style="width:9.2%;">
                                    <el-form-item label="性别" label-width="50px">
                                        <el-tag size="small" style="margin-top:8px" type="primary" v-if="editFrom.sex===1">男</el-tag>
                                        <el-tag size="small" style="margin-top:8px"  type="warning" v-else>女</el-tag>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="3" style="width:12.6%;">
                                    <el-form-item label="身体状况" label-width="68px">
                                        <el-tag size="small" style="margin-top:8px" type="primary" v-if="editFrom.health === true">健康</el-tag>
                                        <el-tag size="small" style="margin-top:8px" effect="dark"  type="danger" v-else>亚健康</el-tag>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4" style="width:13.9%;">
                                    <el-form-item label="是否有过敏史" label-width="100px">
                                        <el-tag size="small" style="margin-top:8px" effect="dark" type="danger"  v-if="editFrom.allergy=== true">有</el-tag>
                                        <el-tag size="small" style="margin-top:8px"  type="primary" v-else>无</el-tag>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="预约疫苗" label-width="80px" >
                                        <el-input v-model="editFrom.vaccineName" disabled style="width:250px"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="7">
                                    <el-form-item label="预约针数：" label-width="110px" >
                                        <span style="margin-left:5px;font-size:17px;font-weight: bold;">第</span> 
                                            <el-tag size="small" style="margin-left:5px;line-height:25px;font-size:14px" effect="dark"  type="danger">{{editFrom.vaccineNeedle}}</el-tag>
                                        <span style="margin-left:5px;font-size:17px;font-weight: bold;">针</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="预约接种点" label-width="95px">
                                        <el-input v-model="editFrom.vaccSiteName" style="width:230px;" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="所属区域" label-width="105px">
                                        <el-input v-model="editFrom.vaccSiteArea" style="width:250px;" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="接种点电话" label-width="120px">
                                        <el-input v-model="editFrom.vaccSitePhone" style="width:200px;" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <!-- 接种点信息 -->
                        <div class="addStyle">
                            <el-row>
                                <el-col :span="7">
                                    <el-form-item label="接种点名称" label-width="95px" prop="vaccSiteId">
                                        <el-select v-model="editFrom.vaccSiteId" @clear="clearVaccSite" clearable placeholder="请选择接种点信息">
                                            <el-option
                                                    v-for="site in vaccSites"
                                                    :key="site.id"
                                                    :label="site.vaccSiteName"
                                                    :value="site.id"
                                                    @click.native="getSiteSelectChangeforAdd(site)" >
                                                    <span style="float: left;">{{ site.vaccSiteName }}</span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="所在区域" label-width="90px">
                                        <el-input v-model="tempVaccSite.area" style="width:295px;" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="详细地址" label-width="120px">
                                        <el-input v-model="tempVaccSite.address" style="width:260px;" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="7">
                                    <el-form-item label="接种疫苗" label-width="95px" prop="vaccineId">
                                        <el-select v-model="editFrom.vaccineId" @clear="clearVaccineInfo" clearable placeholder="请选择接种点疫苗信息">
                                            <el-option
                                                    v-for="selectVaccine in vaccinesInSiteData"
                                                    :key="selectVaccine.id"
                                                    :label="selectVaccine.vaccineName"
                                                    :value="selectVaccine.id"
                                                    @click.native="getVaccSelectChangeforAdd(selectVaccine)" >
                                                    <span style="float: left;">{{ selectVaccine.vaccineName }}</span>
                                                    <span style="margin-left:20px;float: right; color: #ED2C2A;">
                                                        <el-tag size="small" style="width:60px;text-align:center;" v-if="selectVaccine.count >= 100" effect="dark" type="primary">{{ selectVaccine.count }}</el-tag>
                                                        <el-tag size="small" style="width:60px;text-align:center;" v-else effect="dark" type="danger">{{ selectVaccine.count }}</el-tag>
                                                    </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="疫苗类别" label-width="90px">
                                        <el-select
                                                disabled
                                                style=" width:155px;"
                                                v-model="tempVaccineInSite.vaccineType"
                                                placeholder="请选择疫苗类别"
                                        >
                                            <el-option
                                                v-for=" vaccType in vaccineTypes "
                                                :label="vaccType.type"
                                                :key="vaccType.id"
                                                :value="vaccType.id"
                                            >
                                                <span style="margin-left:10px; color: #ED2C2A;">
                                                    <el-tag size="small" style="width:100px;text-align:center;"  effect="dark" type="primary">
                                                    {{ vaccType.type }}
                                                    </el-tag>
                                                </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="疫苗等级" style="margin-left:30px">
                                            <el-select
                                                    disabled
                                                    style=" width:160px;"
                                                    v-model="tempVaccineInSite.vaccDegree"
                                                    placeholder="请选择等级"
                                            >
                                                <el-option
                                                        v-for="degree in vaccDeg"
                                                        :label="degree.label"
                                                        :key="degree.id"
                                                        :value="degree.id"
                                                >
                                                    <span style="margin-left:10px; color: #000; font-size: 13px">
                                                        <el-tag size="small" style="width:50px;text-align:center;margin-right:5px"  effect="dark" type="primary">
                                                        {{ degree.label }}
                                                        </el-tag>
                                                        疫苗
                                                    </span>
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="5">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="总针数" label-width="110px">
                                            <el-input v-model="tempVaccineInSite.totalNeedle" disabled style="width:80px;"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="addStyle">
                            <el-row>
                                <el-col :span="5">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="注射位置" label-width="80px" prop="vaccSite">
                                            <el-input v-model="editFrom.vaccSite" clearable style="width:130px;"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="6" style="width:24.3%;">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="注射针数" label-width="85px" prop="vaccAmount">
                                            <el-select
                                                    clearable
                                                    style=" width:150px;"
                                                    v-model="editFrom.vaccAmount"
                                                    placeholder="请选择注射针数"
                                            >
                                                <el-option
                                                        v-for="needle in tempVaccineInSite.totalNeedle"
                                                        :label="needle"
                                                        :key="needle"
                                                        :value="needle"
                                                >
                                                    <span style="margin-left:10px; color: #ED2C2A;">
                                                        <el-tag size="small" style="width:100px;text-align:center;"  effect="dark" type="primary">
                                                        {{ needle }}针
                                                        </el-tag>
                                                    </span>
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="接种记录人" label-width="95px" prop="accountId">
                                        <el-select v-model="editFrom.accountId" style=" width:170px;" clearable @clear="clearUserInfo" placeholder="请选择记录人信息">
                                            <el-option
                                                    v-for="systemUser in systemUserData"
                                                    :key="systemUser.id"
                                                    :label="systemUser.nickname"
                                                    :value="systemUser.id"
                                                    @click.native="getUserSelectChangeforAdd(systemUser)" >
                                                    <span style="float: left;">{{ systemUser.nickname }}</span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="7">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="隶属部门" label-width="90px">
                                            <el-input v-model="tempSystemUser.departmentName" disabled style="width:200px;"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-form>
                </span>
                <!-- 对话框底部 -->
                <span slot="footer" style="text-align:center;" class="dialog-footer">
                    <el-button @click="addDialogVisible = false" style="margin-right:50px;width:180px">取 消</el-button>
                    <el-button 
                        type="primary" 
                        style="margin-right:50px;width:180px" 
                        v-hasPermission="'inoculate:add'"
                        :loading="btnLoading"
                        @click="addInculate">提交接种单</el-button>
                </span>
            </el-dialog>

            <!--  接种时提交接种单确认框 -->
            <el-dialog title="确认新的疫苗接种单" @close="closeAddConfirmDialog" :visible.sync="addConfirmDialogVisible" style="width:85%;margin:0 auto;height:100%">
                <!-- 表单 -->
                <span>
                    <el-form
                            :model="addForm"
                            label-width="80px"
                            size="mini"
                            class="demo-ruleForm"
                    >
                        <div class="addStyle">
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="接种人名称" label-width="90px">
                                        <el-input v-model="addForm.realName" disabled style="width:150px;"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="3">
                                    <el-form-item label="性别" label-width="40px">
                                        <el-tag size="small" type="primary" v-if="addForm.sex===1">男</el-tag>
                                        <el-tag size="small" type="warning" v-else>女</el-tag>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="3">
                                    <span style="margin-left:20px;">
                                        <el-tag size="small" style="margin-top:2px;" type="primary" v-if="addForm.health === true">健康</el-tag>
                                        <el-tag size="small" style="margin-top:2px;" effect="dark"  type="danger" v-else>亚健康</el-tag>
                                    </span>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="电话" label-width="55px" >
                                        <el-input v-model="addForm.vaccinatorPhone" disabled style="width:140px;"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="接种人住址" label-width="90px" >
                                        <el-input v-model="addForm.vaccinatorAddress" disabled style="width:235px;"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="预约疫苗" label-width="120px" >
                                        <el-input v-model="addForm.vaccineName" disabled style="width:175px"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="addStyle">
                            <el-row style="margin-bottom:10px">
                                <el-col :span="10">
                                    <el-form-item label="接种疫苗" label-width="90px" >
                                        <el-input v-model="addForm.InjectVaccineName" disabled style="width:150px;"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="疫苗等级" label-width="90px">
                                            <el-select
                                                    disabled
                                                    style=" width:100px;"
                                                    v-model="addForm.InjectVaccDegree"
                                                    placeholder="请选择等级"
                                            >
                                                <el-option
                                                        v-for="degree in vaccDeg"
                                                        :label="degree.label"
                                                        :key="degree.id"
                                                        :value="degree.id"
                                                >
                                                    <span style="margin-left:10px; color: #000; font-size: 13px">
                                                        <el-tag size="small" style="width:50px;text-align:center;margin-right:5px"  effect="dark" type="primary">
                                                        {{ degree.label }}
                                                        </el-tag>
                                                        疫苗
                                                    </span>
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="5">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="总针数" label-width="80px">
                                            <el-input v-model="addForm.InjectTotalNeedle" disabled style="width:60px;"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                            <!-- 下一行 -->
                            <el-row>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="接种针数" label-width="90px">
                                            <el-input v-model="addForm.vaccAmount" disabled style="width:50px;"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item label="疫苗类别" label-width="88px">
                                        <el-select
                                                disabled
                                                style=" width:140px;"
                                                v-model="tempVaccineInSite.vaccineType"
                                                placeholder="请选择疫苗类别"
                                        >
                                            <el-option
                                                v-for=" vaccType in vaccineTypes "
                                                :label="vaccType.type"
                                                :key="vaccType.id"
                                                :value="vaccType.id"
                                            >
                                                <span style="margin-left:10px; color: #ED2C2A;">
                                                    <el-tag size="small" style="width:100px;text-align:center;"  effect="dark" type="primary">
                                                    {{ vaccType.type }}
                                                    </el-tag>
                                                </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" style="width:36%">
                                    <el-form-item label="供应商" label-width="87px" >
                                        <el-input v-model="addForm.supplierName" disabled style="width:133px"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="9" style="width:36.2%">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="注射位置" label-width="90px" prop="vaccSite">
                                            <el-input v-model="addForm.vaccSite" disabled style="width:120px;"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="7">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="记录人" label-width="60px" prop="vaccSite">
                                            <el-input v-model="addForm.nickname" disabled style="width:100px;"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="所属部门" label-width="70px" prop="vaccSite">
                                            <el-input v-model="addForm.departmentName" disabled style="width:133px;"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-form>
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addConfirmDialogVisible = false" style="margin-right:50px">返回修改</el-button>
                    <el-button
                            type="primary"
                            @click="submitInoculate"
                            :loading="btnLoading"
                            :disabled="btnDisabled"
                    >确定提交</el-button>
                </span>
            </el-dialog>

            <!-- 查看对话框 -->
            <el-dialog :title="showTitle" :visible.sync="showDialogVisible" width="70%"  @close="closeshowDialog">
                <span>
                    <el-form
                            :model="showForm"
                            label-width="80px"
                            class="demo-ruleForm"
                    >
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="接种人名称" label-width="95px">
                                    <el-input v-model="showForm.realName" disabled style="width:230px;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="接种人住址" label-width="105px" >
                                    <el-input v-model="showForm.vaccinatorAddress" disabled style="width:250px;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="接种人电话" label-width="120px" >
                                    <el-input v-model="showForm.vaccinatorPhone" disabled style="width:200px;"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!-- 第二行 -->
                        <el-row>
                            <el-col :span="2" style="width:9.2%;">
                                <el-form-item label="性别" label-width="50px">
                                    <el-tag size="small" style="margin-top:8px" type="primary" v-if="showForm.sex===1">男</el-tag>
                                    <el-tag size="small" style="margin-top:8px"  type="warning" v-else>女</el-tag>
                                </el-form-item>
                            </el-col>
                            <el-col :span="3" style="width:12.6%;">
                                <el-form-item label="身体状况" label-width="68px">
                                    <el-tag size="small" style="margin-top:8px" type="primary" v-if="showForm.health === true">健康</el-tag>
                                    <el-tag size="small" style="margin-top:8px" effect="dark"  type="danger" v-else>亚健康</el-tag>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4" style="width:13.9%;">
                                <el-form-item label="是否有过敏史" label-width="100px">
                                    <el-tag size="small" style="margin-top:8px" effect="dark" type="danger"  v-if="showForm.allergy=== true">有</el-tag>
                                    <el-tag size="small" style="margin-top:8px"  type="primary" v-else>无</el-tag>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="接种疫苗" label-width="80px" >
                                    <el-input v-model="showForm.vaccineName" disabled style="width:250px"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="疫苗供应商" label-width="95px" >
                                    <el-input v-model="showForm.supplierName" disabled style="width:200px"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="预约接种时间" label-width="105px">
                                    <el-date-picker
                                    disabled
                                    v-model="showForm.reservationDate"
                                    align="right"
                                    type="date"
                                    placeholder="选择日期"
                                    style="width:220px;">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9" style="width:37.0%;">
                                <el-form-item label="预约时间" label-width="105px">
                                    <el-radio-group  style="margin-left:20px" v-model="showForm.reservationTime">
                                        <el-radio disabled :label="1">上午</el-radio>
                                        <el-radio disabled :label="2">下午</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="预约针数：" label-width="86px" >
                                    <span style="margin-left:10px;font-size:17px;font-weight: bold;">第</span> 
                                        <el-tag size="small" style="margin-left:5px;line-height:25px;font-size:14px" effect="dark"  type="danger">{{showForm.vaccineNeedle}}</el-tag>
                                    <span style="margin-left:5px;font-size:17px;font-weight: bold;">针</span>
                                </el-form-item>
                                
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="接种点名称" label-width="90px">
                                    <el-input v-model="showForm.vaccSiteName" style="width:235px;" disabled placeholder="输入接种点名称查询"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" style="width:35.5%">
                                <el-form-item label="接种点区域" label-width="95px">
                                    <el-input v-model="showForm.vaccSiteArea" style="width:260px;" disabled placeholder="输入接种点名称查询"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" style="width:30.5%">
                                <el-form-item label="接种点电话" label-width="99px">
                                    <el-input v-model="showForm.vaccSitePhone" style="width:200px;" disabled placeholder="输入接种点名称查询"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="预约状态" label-width="160px">
                                    <el-tag size="small" effect="dark" type="danger" v-if="showForm.states===0">预约未受理</el-tag>
                                    <el-tag size="small" type="primary" v-if="showForm.states===1">受理待接种</el-tag>
                                    <el-tag size="small" type="success" v-else-if="showForm.states===2">接种待留观</el-tag>
                                    <el-tag size="small" effect="dark" type="danger" v-else-if="showForm.states=== -1">预约过期</el-tag>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="接种点地址" label-width="95px">
                                    <el-input v-model="showForm.vaccSiteAddress" style="width:260px;" disabled placeholder="输入接种点名称查询"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </span>
                <span slot="footer" style="text-align:center;" class="dialog-footer">
                    <el-button @click="showDialogVisible = false" style="margin-right:50px;width:180px">取 消</el-button>
                    <el-button type="primary" v-if="showForm.states === 0" style="margin-right:50px;width:180px" @click="submitRecord(showForm.id)">受理</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
    import moment from 'moment';
    import 'moment/locale/zh-cn'
    moment.locale('zh-cn');
    export default {
        data() {
            return {
                btnLoading: false,
                btnDisabled: false,
                loading:true,
                showDialogVisible: false,   // 展示接种信息是否显示
                addConfirmDialogVisible:false,  //确认弹框是否显示
                addDialogVisible: false, //添加弹框是否显示
                total: 0, //总共多少条数据
                inoculatenData: [], //表格数据
                needles:[1,2,3,4,5],  //预约的针数
                vaccDeg:[{id:1,label:"甲类"},{id:2,label:"乙类"},{id:3,label:"丙类"},{id:4,label:"丁类"}],  //疫苗等级
                vaccineTypes:[{id:1,type:"减毒活疫苗"},{id:2,type:"灭活疫苗"},{id:3,type:"基因重组疫苗"}],  //疫苗等级
                vaccSites:[],  // 所有接种点信息
                vaccinesInSiteData:[],  // 接种点的所有疫苗
                systemUserData:[],  //记录人列表
                // 中间数据
                tempVaccSite:{},
                queryMap: { 
                    pageNum: 1,
                    pageSize: 10,
                    reservationDate:"",
                    reservationTime:"",
                    vaccineNeedle:"",
                    vaccinatorArea:"",
                    vaccinatorAddress:"",
                    vaccineName: "",
                    vaccineType:"",
                    vaccDegree:"",
                    vaccSiteName:"",
                    vaccSiteArea:"",
                    vaccSiteAddress:""}, //查询对象
                queryAllMap:{
                    pageNum: 1,
                    pageSize: 10
                },
                addForm: {}, //添加接种表单数据
                addConfirm:{}, // 确认提交数据集
                showForm:{},  // 展示接种信息
                editFrom:{},  // 添加前数据存放
                showFrom:{},  // 展示表单数据
                tempVaccineInSite:{},
                tempSystemUser:{},  // 选择的记录人信息
                addTitle:"", // 添加接种疫苗title
                showTitle:"", // 展示接种信息title
                //添加验证
                addFormRules: {
                    vaccAmount:[
                        { required: true, message: "请选择本次接种注射针数", trigger: "change" }
                    ],
                    vaccSiteId: [
                        { required: true, message: "请选择注射疫苗接种点", trigger: "change" }
                    ],
                    accountId: [
                        { required: true, message: "请选择记录人信息", trigger: "change" }
                    ],
                    vaccSite: [
                        { required: true, message: "请填写接种的部位信息", trigger: "blur" }
                    ],
                    vaccineId: [
                        { required: true, message: "请选择接种的疫苗信息", trigger: "change" }
                    ],
                } //添加验证
            };
        },
        methods: {
            //搜索
            search() {
                this.queryMap.pageNum = 1;
                this.queryMap.reservationDate = moment(this.queryMap.reservationDate).format('YYYY-MM-DD')
                this.getInoculateList();
                this.reset();
            },
            //根据名字搜索全部预约信息
            async searchByName(){
                this.queryMap.inoculatenData = null;
                const { data: res } = await this.$http.get("business/inoculate/findCaseList", {
                    params: this.queryMap
                });
                if (res.code === 20000) {
                    this.total = res.data.total;
                    this.inoculatenData = res.data.reservationRecords;
                } else {
                    this.inoculatenData =[];
                    return this.$message.error(res.message);
                }
            },
            //搜索全部
            async searchAll(){
                this.queryMap.inoculatenData = null;
                const { data: res } = await this.$http.get("business/inoculate/findCaseList", {
                    params: this.queryAllMap
                });
                if (res.code === 20000) {
                    this.total = res.data.total;
                    this.inoculatenData = res.data.reservationRecords;
                } else {
                    this.inoculatenData =[];
                    return this.$message.error(res.message);
                }
            },
            // 条件搜索
            searchByConditions(){
                this.$refs.showFormRef.validate(valid => {
                    if (!valid) {
                        return;
                    } else {
                        this.queryMap.pageNum = 1;
                        this.queryMap.reservationDate = moment(this.queryMap.reservationDate).format('YYYY-MM-DD')
                        this.getInoculateList();
                        this.showAdvanceSearch = false
                        this.reset();
                    }
                });
            },
            /**
             * 重置
             */
            reset(){
                this.queryMap= {
                    pageNum: 1,
                    pageSize: 10,
                    reservationDate: '',
                    reservationTime:"",
                    vaccineNeedle:"",
                    realName:"",
                    sex:"",
                    health:"",
                    allergy:"",
                    vaccinatorArea:"",
                    vaccinatorAddress:"",
                    vaccineName: "",
                    vaccineType:"",
                    vaccDegree:"",
                    vaccSiteName:"",
                    vaccSiteArea:"",
                    vaccSiteAddress:""
                };
            },
            /**
             * 向后台提交接种单
             */
            async submitInoculate(){
                this.btnLoading = true;
                this.btnDisabled = true;
                this.$refs.addFormRef.clearValidate();
                // 转移数据集
                this.addConfirm.accountId = this.addForm.accountId
                this.addConfirm.vaccNumber = this.addForm.vaccineId
                this.addConfirm.vaccinatorId = this.addForm.vaccinatorId
                this.addConfirm.vaccSiteId = this.addForm.vaccSiteId
                this.addConfirm.vaccSiteName = this.addForm.vaccSiteName
                this.addConfirm.reservationId = this.addForm.id
                this.addConfirm.vaccAmount = this.addForm.vaccAmount
                this.addConfirm.vaccSite = this.addForm.vaccSite
                const { data: res } = await this.$http.post(
                    "business/inoculate/postForm",
                    this.addConfirm
                );
                if (res.success) {
                    this.$notify.success({
                        title:'操作成功',
                        message:'已完成接种登记，等待留观!',
                    });
                    this.addConfirm = {};
                    await this.getInoculateList();
                } else {
                    this.btnLoading = false;
                    this.btnDisabled = false;
                    this.addConfirm = {};
                    this.addConfirmDialogVisible = false;
                    this.addDialogVisible = false;
                    return this.$message.error(res.message);
                }
                this.btnLoading = false;
                this.btnDisabled = false;
                this.addConfirmDialogVisible = false;
                this.addDialogVisible = false;
            },
            /**
             * /展示疫苗接种信息
             */
            async showRecord(id) {
                const { data: res } = await this.$http.get("business/inoculate/get/" + id);
                if (res.code === 20000) {
                    this.showForm = res.data.result;
                    this.showTitle = "查看" +"【"+this.showForm.realName +"】"+"的接种记录"
                } else {
                    return this.$message.error(res.message);
                }
                this.showDialogVisible = true;
            },
            /**
             * 打开确认接种单框
             */
            addInculate() {
                this.$refs.addFormRef.validate(async valid => {
                    if (!valid) {
                        return;
                    } else {
                        this.$refs.addFormRef.clearValidate();
                        this.addForm = this.editFrom
                        // 修改 editFrom 中接种点信息
                        if(this.tempVaccSite != null){
                            this.addForm.vaccSiteId = this.tempVaccSite.id
                            this.addForm.vaccSiteName = this.tempVaccSite.vaccSiteName
                            this.addForm.vaccSiteArea = this.tempVaccSite.area
                            this.addForm.vaccSiteAddress = this.tempVaccSite.address
                            this.addForm.vaccSitePhone = this.tempVaccSite.phoneNumber
                        }
                        // 修改 editFrom 中疫苗信息
                        if(this.tempVaccineInSite != null){
                            this.addForm.vaccineId = this.tempVaccineInSite.id
                            this.addForm.InjectVaccineName = this.tempVaccineInSite.vaccineName
                            this.addForm.InjectVaccineType = this.tempVaccineInSite.vaccineType
                            this.addForm.InjectVaccDegree = this.tempVaccineInSite.vaccDegree
                            this.addForm.supplierName = this.tempVaccineInSite.supplierName
                            this.addForm.InjectTotalNeedle = this.tempVaccineInSite.totalNeedle
                        }
                        // 修改 editFrom 中记录人信息
                        if(this.tempSystemUser != null){
                            this.addForm.accountId = this.tempSystemUser.id 
                            this.addForm.nickname = this.tempSystemUser.nickname
                            this.addForm.departmentName = this.tempSystemUser.departmentName
                        }
                        this.addConfirmDialogVisible = true
                    }
                });
            },
            /**
             * 加载所有接种点信息
             */
            async getAllVaccSite() {
                const { data: res } = await this.$http.get("business/devolution/findAllVaccSites");
                if(!res.success){
                    return this.$message.error(res.message);
                }
                this.vaccSites = res.data.VaccSites;
            },
            /**
             * 根据接种点id返回该接种点所有的疫苗
             */
            async getVaccinesBySiteId(id){
                const { data: res } = await this.$http.get("business/reservate/getVacc/" + id);
                if (res.code === 20000) {
                    this.vaccinesInSiteData = res.data.allVaccinesInSite.vaccines;
                } else {
                    this.vaccinesInSiteData =[];
                    return this.$message.error(res.message);
                }
            },
            /**
             * 获取所有记录人信息
             */
            async getAllSystemUser(){
                const { data: res } = await this.$http.get("system/users/findListToOther");
                if (res.code === 20000) {
                    this.systemUserData = res.data.result;
                } else {
                    this.systemUserData =[];
                    return this.$message.error(res.message);
                }
            },
            /**
             * 监听点击接种点
             */
            getSiteSelectChangeforAdd(vaccSite){
                // 根据新的接种点查询该地的疫苗
                this.getVaccinesBySiteId(vaccSite.id);
                this.tempVaccSite = vaccSite;
            },
            /**
             * 点击接种点清空按钮，删除接种点信息
             */
            clearVaccSite(){
                // 删除 editFrom中 接种点信息
                this.tempVaccSite = {};
                this.tempVaccineInSite = {};
            },
            /**
             * 点击清空选中疫苗信息
             */
             clearVaccineInfo(){
                this.tempVaccineInSite = {}
             },
            /**
             * 点击清空记录人信息
             */
            clearUserInfo(){
                this.tempSystemUser = {};
            },
            /**
             * 监听 添加时 接种点疫苗  select下拉框改变
             */
            getVaccSelectChangeforAdd(selectVaccine){
                this.tempVaccineInSite = selectVaccine;
            },
            /**
             * 监听 添加时 记录人选择框点击事件
             */
            getUserSelectChangeforAdd(systemUser){
                this.tempSystemUser = systemUser;
            },
            /**
             * 接种疫苗预约信息
             */
            async acceptIncoulate(id){
                const { data: res } = await this.$http.get("business/inoculate/get/" + id);
                if(res.success){
                    this.editFrom = res.data.result;
                }
                this.addTitle = "填写" +"【"+this.editFrom.realName +"】"+"的接种记录"
                this.addDialogVisible = true
            },
            //加载所有已受理的预约列表
            async getInoculateList() {
                const { data: res } = await this.$http.get("business/inoculate/findCaseList", {
                    params: this.queryMap
                });
                if (res.code === 20000) {
                    this.total = res.data.total;
                    this.inoculatenData = res.data.reservationRecords;
                } else {
                    this.inoculatenData =[];
                    return this.$message.error(res.message);
                }
            },
            //改变页码
            handleSizeChange(newSize) {
                this.queryMap.pageSize = newSize;
                this.getInoculateList();
            },
            //翻页
            handleCurrentChange(current) {
                this.queryMap.pageNum = current;
                this.getInoculateList();
            },
            //关闭查看弹出框
            closeshowDialog() {
                this.showForm = {};
            },
            //关闭确认弹出框
            closeAddConfirmDialog() {
                this.btnLoading = false;
                this.btnDisabled = false;
                this.tempVaccSite = {};
                this.tempVaccineInSite = {};
                this.editFrom.vaccSiteId = null;
                this.editFrom.vaccineId = null;
            },
            //关闭添加接种记录弹出框
            closeAddDialog() {
                this.$refs.addFormRef.clearValidate();
                this.$refs.addFormRef.resetFields();
                this.editFrom = {};
                this.tempVaccSite = {};
                this.vaccinesInSiteData =[];
                this.tempVaccineInSite = {};
            }
        },
        created() {
            this.getInoculateList();
            this.getAllVaccSite();
            this.getAllSystemUser();
            setTimeout(() => {
                this.loading = false;
            }, 500);
        }
    };
</script>

<style>
    .el-dialog__footer{
        text-align: center;
    }
    .addStyle{
        border: 1px solid #409eff;
        border-radius: 5px;
        box-sizing: border-box;
        padding-top: 10px;
        margin-bottom: 10px;
    } 
</style>